<script setup>
import { ref } from 'vue';
let products = ref([])
const dialogVisible = ref(false);
const currentProduct = ref({});
const showDetail=(product)=> {
   dialogVisible.value = true;
  currentProduct.value = product;

}
// 初始化数据
products.value = [
   { name: '商品1', price: 100, stock: 10, image: 'https://img0.baidu.com/it/u=3925091501,63024029&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' },
   { name: '商品2', price: 200, stock: 5, image: 'https://img1.baidu.com/it/u=1815147904,1320684689&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
   { name: '商品3', price: 300, stock: 15, image: 'https://img2.baidu.com/it/u=3866593020,4035634905&fm=253&fmt=auto&app=138&f=JPEG?w=706&h=500' },
   { name: '商品4', price: 400, stock: 20, image: 'https://img2.baidu.com/it/u=203328381,3194992874&fm=253&fmt=auto&app=138&f=JPEG?w=760&h=760' },
   { name: '商品5', price: 500, stock: 25, image: 'https://img1.baidu.com/it/u=1791174504,1811885875&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
   { name: '商品6', price: 600, stock: 35, image: 'https://img1.baidu.com/it/u=2624292242,700556270&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' },
   { name: '商品7', price: 700, stock: 45, image: 'https://img2.baidu.com/it/u=1420480450,360877367&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' },
]

</script>

<template>
   <div>
    <el-row :gutter="20">
      <el-col :span="6" v-for="(product, index) in products" :key="index" style="margin: 5px;">
        <el-card :body-style="{ padding: '10px',height:'300px',margin:'0px' }">
          <img :src="product.image" class="image" style=" height: 200px;">
          <div style="padding: 14px;">
            <span>{{ product.name }}</span>
            <div class="bottom">
              <span>价格: ¥{{ product.price }}</span>
            </div>

              <el-button type="text" class="button" @click="showDetail(product)">查看详情</el-button>

          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog  v-model="dialogVisible" title="商品详情">
      <p>商品名称: {{ currentProduct.name }}</p >
      <p>价格: ¥{{ currentProduct.price }}</p >
      <p>库存: {{ currentProduct.stock }}</p >
    </el-dialog>
  </div>
</template>

<style scoped>
.image {
  width: 100%;
  display: block;
}
</style>
